<template>
  <div>
    <el-collapse class="audit-template-box" v-model="activeName">
      <el-collapse-item title="审批意见模板" :name="1">
        <div class="scroll">
          <el-radio-group v-model="id" @change="handleOk">
            <el-radio
              v-for="(item, index) in auditTemplateList"
              :key="index"
              :label="item.id"
              style="margin-bottom: 15px"
              >{{ item.name }}
            </el-radio>
          </el-radio-group>
        </div>
        <div style="display: flex; justify-content: space-between">
          <div>
            <el-button type="text" icon="el-icon-plus" @click="handleAdd"
              >新增</el-button
            >
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate"
              style="margin-left: 20px"
              >修改</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="handleDelete"
              style="margin-left: 20px; color: #f56c6c"
            >
              删除
            </el-button>
          </div>
          <!-- <el-button type="text" icon="el-icon-check" style="margin-right: 20px;">确定</el-button> -->
        </div>
      </el-collapse-item>
    </el-collapse>

    <!-- 添加或修改审批模板对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="模板内容" prop="name">
          <el-input v-model="form.name" placeholder="请输入模板内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addAuditTemplate,
  delAuditTemplate,
  getAuditTemplate,
  listAllAuditTemplate,
  updateAuditTemplate,
} from "@/api/business/auditTemplate";

export default {
  data() {
    return {
      activeName: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "模板内容不能为空", trigger: "blur" },
        ],
      },

      auditTemplateList: [],
      id: null,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      listAllAuditTemplate().then((response) => {
        this.auditTemplateList = response.data;
      });
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加审批模板";
    },
    /** 修改按钮操作 */
    handleUpdate() {
      if (!this.id) {
        this.$modal.msgError("请选择需要修改的数据");
        return;
      }
      this.reset();
      getAuditTemplate(this.id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改审批模板";
      });
    },
    handleOk() {
      console.log(12312);
      if (!this.id) {
        this.$modal.msgError("请选择需要设置的数据");
        return;
      }
      let item = this.auditTemplateList.find((e) => e.id == this.id);
      // this.activeName = 0
      this.$emit("change", item.name);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateAuditTemplate(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("change", this.form.name);

              this.open = false;
              this.getList();
            });
          } else {
            addAuditTemplate(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete() {
      if (!this.id) {
        this.$modal.msgError("请选择需要设置的数据");
        return;
      }
      let id = this.id;
      this.$modal
        .confirm('是否确认删除审批模板编号为"' + id + '"的数据项？')
        .then(function () {
          return delAuditTemplate([id]);
        })
        .then(() => {
          this.getList();
          this.$emit("change", "");

          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.audit-template-box {
  ::v-deep .el-collapse-item__content {
    padding-bottom: 0;
  }

  ::v-deep .el-radio-group {
    display: block;
  }

  ::v-deep .el-radio {
    display: block;
  }

  .scroll {
    padding-top: 15px;
    height: 220px;
    overflow-y: scroll;
  }
}
</style>
